<template>
   <div id="app">
  
  <div class="aaa">
    <div class="dl"><h2 style="color:black">登录</h2> <el-divider class="xian"></el-divider></div>
    <div class="zh"><el-tag>账号</el-tag><el-input v-model="data.account" placeholder="请输入您的账号"></el-input></div>
   <div class="mm"><el-tag>密码</el-tag><el-input v-model="data.password" placeholder="请输入您的密码"></el-input></div>
 <el-button class="but" type="success" @click="events.login">登录</el-button>
  </div>
  
  </div>
</template>

<script setup lang="ts">
import {logins} from '../../api/login';
import type Login_Data_Dto from '../../dto/request/login';
import {set_token} from '../../utils/auth';
import Api_Code from '../../dto/response/Api_Code';
import {reactive} from 'vue';
import {useRouter} from 'vue-router';
import {ElMessage} from 'element-plus'

const router = useRouter();

const data = reactive<Login_Data_Dto>({
    account: '18570362574',
    password: '123456',
});




const events = {
      async login() {
        //没有this 或者说this 指向的并不是vue对象了

        const res = await logins({
            account: data.account,
            password: data.password
        });
        if (res.code === Api_Code.ok) {

            set_token(res.data.toString());
            
            router.push('/');
        } else {
            ElMessage.error(res.message);
        }

    }
}

</script>

<style scoped>
.aaa{
  margin: auto;
 
  width: 500px;
  height: 400px;
 position: relative;
 top: 200px;
  background-color: white;
border-radius: 3px;
background: rgba(209, 200, 200, 0.3);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
.dl{
  text-align:center;
  position: relative;
  top: 30px;
  
}
.xian{
  background:rgb(199, 194, 194);
}
.zh{
  margin-top: 50px;
  margin-left: 8px;
  margin-right: 8px;
}
.mm{
   margin-left: 8px;
  margin-right: 8px;
  margin-top: 40px;
}
.but{
  margin-top: 40px;
  width: 250px;
  margin-left: 125px;
}

body {
    padding: 0;
    margin: 0;
    background: white;
    
}
#app{
    height: 100vh;
    background-image: url(../../image/abcdef.jpg);
    background-size: cover;
}
</style>